<template>
  <div
    class="music-hall-container scroll-container"
    v-infinite-scroll="loadData"
    infinite-scroll-distance="2"
    :infinite-scroll-immediate="false"
    :infinite-scroll-disabled="disabled"
    style="overflow: auto">
    <div
      v-for="(item, index) in styleList.slice(0, currentIndex)"
      :key="item.id"
      class="style-container">
      <h4 class="title">{{ item.name }}</h4>
      <div class="content">
        <div
          @mousedown.prevent="playMusic(list.id)"
          v-for="list in stylePlaylist[index]"
          :key="list.id"
          class="style">
          <span class="iconfont play">&#xea83;</span>
          <el-image
            :src="list.cover"
            lazy />
          <span>{{ list.name }}</span>
        </div>
      </div>
    </div>
    <div
      v-show="isLoading"
      v-loading="isLoading"
      :element-loading-background="bg"
      element-loading-text="加载中，请勿继续滚动！"
      :element-loading-spinner="Svg"
      class="tip"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, inject, Ref } from 'vue';
import { useRouter } from 'vue-router';
import { MusicStyle, StylePlayList, Svg } from '../model';
import { elMessage, getTheme } from '../utils/util';
import { elMessageType } from '../model/enum';
import { getStyleList, getStylePlayList } from '../api/api';
import _ from 'lodash';
import useConfigStore from '../store/config';
const config = useConfigStore();
const router = useRouter();
//设置深色与浅色主题
const color = getTheme().get('fontColor');
const boxShadow = getTheme().get('shadow');
const bg = getTheme().get('background');
//当前加载数据的索引
const currentIndex = ref<number>(1);
//是否禁用滚动加载
const disabled = ref<boolean>(false);
//显示加载图标
const isLoading = ref<boolean>(false);
//曲风
const styleList = reactive<MusicStyle[]>([]);
//曲风下的歌单
const stylePlaylist = reactive<StylePlayList[][]>([]);
//页面进入时的动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;
//点击前往歌单播放音乐
const playMusic = (id: string) => {
  if (config.showScroll == 'block') {
    config.showScroll = 'none';
    config.left = '0px';
  }
  router.push({
    name: 'playlist',
    query: {
      id: id + '',
    },
  });
};

//滚动加载数据
const loadData = () => {
  if (currentIndex.value < styleList.length) {
    isLoading.value = true;
    disabled.value = true;
    setTimeout(async () => {
      await getList(styleList[currentIndex.value].id);
      isLoading.value = false;
      disabled.value = false;
      currentIndex.value++;
    }, 2500);
  } else {
    disabled.value = true;
    elMessage(elMessageType.INFO, '已达到底部');
  }
};

//获取曲风
getStyleList()
  .then((response: any) => {
    const { data } = response;
    data.forEach((item: any, index: number) => {
      const { tagId, tagName } = item;
      styleList.push({
        id: tagId,
        name: tagName,
      });
      if (index < currentIndex.value) {
        getList(tagId);
      }
    });
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });

//获取曲风下的歌单
const getList = (id: string) => {
  getStylePlayList(id)
    .then((response: any) => {
      const {
        data: { playlist },
      } = response;
      const list = reactive<StylePlayList[]>([]);
      playlist.forEach((item: any) => {
        const { id, name, cover } = item;
        list.push({
          id: id as string,
          name: name as string,
          cover: cover as string,
        });
      });
      stylePlaylist.push(list);
    })
    .catch((err: any) => {
      elMessage(elMessageType.ERROR, err.message);
    });
};
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@shadow: v-bind(boxShadow);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.music-hall-container {
  overflow-x: hidden !important;
  .tip {
    width: 81vw;
    height: 50px;
    margin: 10px 0;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: @font-color;
  }

  .style-container {
    width: 87vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
    .title {
      display: block;
      font-size: 22px;
      font-weight: 540;
      letter-spacing: 1px;
      width: 81vw;
      color: @font-color;
      padding-left: 8px;
    }

    .content {
      width: 81vw;
      display: flex;
      flex-wrap: wrap;
      .style {
        position: relative;
        margin: 20px 8px 0;
        display: flex;
        flex-direction: column;
        &:hover:after {
          opacity: 1;
        }
        &:hover .play {
          opacity: 1;
        }
        .play {
          z-index: 10;
          display: inline-block;
          margin: 0;
          color: rgb(245, 245, 245);
          font-size: 50px;
          position: absolute;
          top: 57.5px;
          left: 70px;
          opacity: 0;
          &:hover {
            color: @font-color-green;
          }
          cursor: pointer;
        }
        &::after {
          content: '';
          top: 0;
          height: 190px;
          width: 190px;
          line-height: 190px;
          border-radius: 10px;
          z-index: 9;
          background-color: rgba(0, 0, 0, 0.6);
          position: absolute;
          opacity: 0;
        }
        .el-image {
          width: 190px;
          height: 190px;
          border-radius: 10px;
          object-fit: cover;
          box-shadow: @shadow;
        }
        span {
          display: inline-block;
          font-size: 13px;
          margin: 10px 0 0 1px;
          letter-spacing: 1px;
          color: @font-color;
          width: 190px;
          white-space: wrap;
        }
      }
    }
  }
}
</style>
